<template>
<div class="app">

  <el-menu
      :default-active="this.$route.path"
      class="myEl-menu" router>
    <el-menu-item index="/ExplorePage/RankPage">
      <i class="el-icon-s-data"></i>
      <span slot="title">排行</span>
    </el-menu-item>
    <el-menu-item index="/ExplorePage/FreeBookPage">
      <i class="el-icon-s-ticket"></i>
      <span slot="title">免费</span>
    </el-menu-item>
    <el-menu-item index="/ExplorePage/FullBookPage">
      <i class="el-icon-s-management"></i>
      <span slot="title">完本</span>
    </el-menu-item>

    <el-menu-item index="/ManageBookComponent" v-if="getUser.userType === 'admin'">
      <i class="el-icon-menu"></i>
      <span slot="title">管理</span>
    </el-menu-item>

  </el-menu>

  <el-menu
  @select="select"
  unique-opened
  class="myEl-menu"
  >
    <el-submenu index="man">
      <template slot="title">
        <i class="el-icon-male"></i>
        <span>男频</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="玄幻">玄幻</el-menu-item>
        <el-menu-item index="武侠">武侠</el-menu-item>
        <el-menu-item index="都市">都市</el-menu-item>
        <el-menu-item index="游戏">游戏</el-menu-item>
        <el-menu-item index="科幻">科幻</el-menu-item>
        <el-menu-item index="悬疑">悬疑</el-menu-item>
      </el-menu-item-group>

    </el-submenu>

    <el-submenu index="woman">
      <template slot="title">
        <i class="el-icon-female"></i>
        <span>女频</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="古代言情">古代言情</el-menu-item>
        <el-menu-item index="现代言情">现代言情</el-menu-item>
        <el-menu-item index="玄幻言情">玄幻言情</el-menu-item>
        <el-menu-item index="浪漫青春">浪漫青春</el-menu-item>
        <el-menu-item index="现实生活">现实生活</el-menu-item>
        <el-menu-item index="悬疑推理">悬疑推理</el-menu-item>
      </el-menu-item-group>

    </el-submenu>
  </el-menu>

</div>
</template>

<script>
export default {
  name: "AsideComponent",
  props: {},
  data() {
    return {
      // openeds:['man']
    }
  }, methods: {
    select(index){
      // this.notify(index,"","info")
      this.$router.replace({name:'TransferPage',query:{
          searchText : '_',
          type : index
        }})
    },
    notify(msg,title,type) {
      this.$notify({
        title: title,
        message: msg,
        type: type
      });
    },
  }, watch: {}, computed: {
    getUser:{
      get(){
        return this.$store.getters.getUser;
      }
    }
  }
}
</script>

<style scoped>
.app{
  text-align: center;
  min-height: 750px;
}
</style>